<template>
  <div class="chat-container">
    <!-- 左侧边栏 - 会话列表 -->
    <div class="sidebar">
      <div class="logo-container">
        <el-icon class="logo-icon"><ChatDotRound /></el-icon>
        <h1 class="title">聊天助手</h1>
      </div>
      
      <!-- 新建会话按钮 -->
      <div class="new-chat-btn" @click="createNewSession">
        <el-button type="primary" class="new-btn">
          <el-icon><Plus /></el-icon>新建会话
        </el-button>
      </div>
      
      <!-- 会话列表 -->
      <div class="session-list">
        <div 
          v-for="session in sessionList" 
          :key="session.sessionId" 
          class="session-item"
          :class="{ 'active': currentSession && session.sessionId === currentSession.sessionId }"
          @click="switchSession(session)"
        >
          <div class="session-icon">
            <el-icon><ChatDotRound /></el-icon>
          </div>
          <div class="session-info">
            <div class="session-title">{{ session.title }}</div>
            <div class="session-last-message">{{ session.lastMessage || '暂无消息' }}</div>
          </div>
          <div class="session-actions">
            <el-dropdown trigger="click" @command="handleSessionAction($event, session)">
              <el-icon><MoreFilled /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="rename">重命名</el-dropdown-item>
                  <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧聊天内容区 -->
    <div class="chat-content">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <div class="current-session">{{ currentSession ? currentSession.title : '欢迎使用聊天助手' }}</div>
        <!-- 模型选择 -->
        <div class="model-selector">
          <el-popover
            placement="bottom"
            :width="400"
            trigger="click"
          >
            <template #reference>
              <el-button type="primary" plain>
                <template v-if="selectedModelId">
                  <el-icon v-if="!getCurrentModelIcon"><ChatSquare /></el-icon>
                  <img :src="getCurrentModelIcon" alt="" class="model-icon" v-if="getCurrentModelIcon" />
                  <span>{{ getCurrentModelName }}</span>
                </template>
                <template v-else>
                  <el-icon><Plus /></el-icon>
                  <span>选择模型</span>
                </template>
              </el-button>
            </template>
            
            <!-- 模型列表弹出内容 -->
            <div class="model-popover-content">
              <div class="model-search">
                <el-input
                  v-model="modelSearchKeyword"
                  placeholder="搜索模型"
                  prefix-icon="Search"
                  clearable
                />
              </div>
              <div class="model-list">
                <div 
                  v-for="model in filteredModelList"
                  :key="model.id"
                  class="model-item"
                  :class="{ 'active': selectedModelId === model.id }"
                  @click="handleModelChange(model.id)"
                >
                  <div class="model-item-icon">
                    <el-icon v-if="!model.icon"><ChatSquare /></el-icon>
                    <img :src="model.icon" alt="" v-if="model.icon" />
                  </div>
                  <div class="model-item-info">
                    <div class="model-item-name">{{ model.name }}</div>
                    <div class="model-item-desc">{{ model.description }}</div>
                    <div class="model-item-tags" v-if="model.mcpServices">
                      <el-tag 
                        v-for="service in getMcpServiceNames(model.mcpServices)"
                        :key="service"
                        size="small"
                        type="info"
                        effect="plain"
                      >
                        {{ service }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      
      <!-- 聊天内容区 -->
      <div class="chat-messages" ref="messageContainer">
        <template v-if="!currentSession">
          <!-- 欢迎页面 -->
          <div class="welcome-container">
            <div class="welcome-content">
              <div class="welcome-title">欢迎使用聊天助手</div>
              <div class="welcome-desc">选择一个模型开始对话，或者创建一个新的会话</div>
              <div class="model-cards">
                <div 
                  v-for="model in modelList" 
                  :key="model.id" 
                  class="model-card"
                  @click="selectModelAndCreateSession(model)"
                >
                  <el-icon class="model-card-icon" v-if="!model.icon"><ChatSquare /></el-icon>
                  <img :src="model.icon" alt="" class="model-card-icon" v-if="model.icon" />
                  <div class="model-card-name">{{ model.name }}</div>
                  <div class="model-card-desc">{{ model.description }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <!-- 消息列表 -->
          <div class="message-list">
            <div 
              v-for="(message, index) in messageList" 
              :key="index" 
              class="message-item"
              :class="{ 'user-message': message.messageType === 'user', 'assistant-message': message.messageType === 'assistant', 'error-message': message.isError }"
            >
              <div class="message-avatar">
                <el-avatar :icon="message.messageType === 'user' ? 'User' : 'AssistantAvatar'" />
              </div>
              <div class="message-content">
                <div class="message-sender" v-if="false">助手</div>
                <div class="message-text" v-html="formatMessage(message.content)"></div>
                <!-- 附件列表 -->
                <div class="attachment-list" v-if="message.attachments && message.attachments.length > 0">
                  <div 
                    v-for="attachment in message.attachments" 
                    :key="attachment.id" 
                    class="attachment-item"
                  >
                    <div class="attachment-icon">
                      <el-icon><Document /></el-icon>
                    </div>
                    <div class="attachment-info">
                      <div class="attachment-name">{{ attachment.fileName }}</div>
                      <div class="attachment-size">{{ formatFileSize(attachment.fileSize) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载中 -->
          <div class="loading-container" v-if="isLoading">
            <el-loading />
            <div class="loading-text">AI正在思考中...</div>
          </div>
        </template>
      </div>
      
      <!-- 输入区域 -->
      <div class="chat-input-area">
        <div class="input-container">
          <div class="textarea-container">
            <el-input
              v-model="inputMessage"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 5 }"
              placeholder="输入消息或者 / 使用快捷指令"
              @keydown.enter.prevent="handleSendMessage"
            />
          </div>
          <div class="input-actions">
            <el-upload
              action="#"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleFileChange"
            >
              <el-button class="action-btn">
                <el-icon><Paperclip /></el-icon>
              </el-button>
            </el-upload>
            <el-button type="primary" class="send-btn" @click="handleSendMessage" :disabled="!inputMessage.trim() && !selectedFile">
              <el-icon><Position /></el-icon>发送
            </el-button>
          </div>
        </div>
        <!-- 附件预览 -->
        <div class="selected-file" v-if="selectedFile">
          <div class="file-info">
            <el-icon><Document /></el-icon>
            <span class="file-name">{{ selectedFile.name }}</span>
            <span class="file-size">({{ formatFileSize(selectedFile.size) }})</span>
          </div>
          <el-button class="remove-file" @click="removeSelectedFile">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 会话重命名对话框 -->
    <el-dialog
      v-model="renameDialogVisible"
      title="重命名会话"
      width="400px"
    >
      <el-form :model="renameForm">
        <el-form-item label="会话名称">
          <el-input v-model="renameForm.title" placeholder="请输入会话名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="renameDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmRename">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getChatModelList,
  getChatSessionList,
  getChatMessageList,
  createChatSession,
  updateChatSession,
  deleteChatSession,
  sendChatMessage,
  uploadChatFile
} from '@/api/chat';
import { Document, Plus, ChatDotRound, Position, Paperclip, Close, MoreFilled, ChatSquare } from '@element-plus/icons-vue';
import { marked } from 'marked';

// 路由
const route = useRoute();
const router = useRouter();

// 状态
const sessionList = ref([]);
const currentSession = ref(null);
const messageList = ref([]);
const modelList = ref([]);
const selectedModelId = ref(null);
const inputMessage = ref('');
const isLoading = ref(false);
const selectedFile = ref(null);
const messageContainer = ref(null);

// 重命名对话框
const renameDialogVisible = ref(false);
const renameForm = ref({
  sessionId: '',
  title: ''
});

// 模拟用户ID (实际应该从用户系统获取)
const currentUserId = ref(1);

// 模型搜索关键词
const modelSearchKeyword = ref('');

// 根据关键词过滤模型列表
const filteredModelList = computed(() => {
  if (!modelSearchKeyword.value) {
    return modelList.value;
  }
  const keyword = modelSearchKeyword.value.toLowerCase();
  return modelList.value.filter(model => 
    model.name.toLowerCase().includes(keyword) || 
    model.description?.toLowerCase().includes(keyword)
  );
});

// 获取当前选中模型的图标
const getCurrentModelIcon = computed(() => {
  const model = modelList.value.find(m => m.id === selectedModelId.value);
  return model?.icon || '';
});

// 获取当前选中模型的名称
const getCurrentModelName = computed(() => {
  const model = modelList.value.find(m => m.id === selectedModelId.value);
  return model?.name || '选择模型';
});

// 获取MCP服务名称列表
const getMcpServiceNames = (mcpServices) => {
  if (!mcpServices) return [];
  return mcpServices.split(',').map(id => {
    const service = mcpServiceOptions.value.find(s => s.id.toString() === id);
    return service?.name || id;
  });
};

// 初始化
onMounted(async () => {
  try {
    // 加载模型列表
    const modelRes = await getChatModelList();
    modelList.value = modelRes || [];
    
    // 加载会话列表
    await loadSessionList();
    
    // 如果路由中有会话ID，则加载该会话
    const sessionId = route.params.sessionId;
    if (sessionId) {
      const session = sessionList.value.find(s => s.sessionId === sessionId);
      if (session) {
        await switchSession(session);
      }
    }
  } catch (error) {
    console.error('初始化失败:', error);
    ElMessage.error('加载数据失败，请刷新重试');
  }
});

// 加载会话列表
async function loadSessionList() {
  try {
    const res = await getChatSessionList(currentUserId.value);
    sessionList.value = res || [];
  } catch (error) {
    console.error('加载会话列表失败:', error);
    ElMessage.error('加载会话列表失败');
  }
}

// 加载消息列表
async function loadMessageList(sessionId) {
  try {
    const res = await getChatMessageList(sessionId);
    messageList.value = res || [];
    // 滚动到底部
    await nextTick();
    scrollToBottom();
  } catch (error) {
    console.error('加载消息列表失败:', error);
    ElMessage.error('加载消息列表失败');
    
    // 清空消息列表，添加一条错误提示
    messageList.value = [{
      messageType: 'assistant',
      content: '消息加载失败，请刷新页面重试。',
      createTime: new Date(),
      isError: true
    }];
    
    await nextTick();
    scrollToBottom();
  }
}

// 创建新会话
async function createNewSession() {
  try {
    // 如果没有选择模型，显示提示
    if (!selectedModelId.value && modelList.value.length > 0) {
      selectedModelId.value = modelList.value[0].id;
    }
    
    const data = {
      title: '新会话',
      modelId: selectedModelId.value,
      userId: currentUserId.value
    };
    
    const sessionId = await createChatSession(data);
    
    // 重新加载会话列表
    await loadSessionList();
    
    // 切换到新会话
    const newSession = sessionList.value.find(s => s.sessionId === sessionId);
    if (newSession) {
      await switchSession(newSession);
    }
  } catch (error) {
    console.error('创建会话失败:', error);
    ElMessage.error('创建会话失败');
  }
}

// 切换会话
async function switchSession(session) {
  currentSession.value = session;
  selectedModelId.value = session.modelId;
  
  // 加载消息列表
  await loadMessageList(session.sessionId);
  
  // 更新路由
  router.push(`/ai/chat/${session.sessionId}`);
}

// 处理会话操作
async function handleSessionAction(command, session) {
  if (command === 'rename') {
    // 打开重命名对话框
    renameForm.value = {
      sessionId: session.sessionId,
      title: session.title
    };
    renameDialogVisible.value = true;
  } else if (command === 'delete') {
    // 删除会话确认
    ElMessageBox.confirm('确定要删除这个会话吗？', '删除会话', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        await deleteChatSession(session.sessionId);
        // 如果删除的是当前会话，清空当前会话
        if (currentSession.value && currentSession.value.sessionId === session.sessionId) {
          currentSession.value = null;
          messageList.value = [];
          router.push('/ai/chat');
        }
        // 重新加载会话列表
        await loadSessionList();
        ElMessage.success('删除成功');
      } catch (error) {
        console.error('删除会话失败:', error);
        ElMessage.error('删除会话失败');
      }
    }).catch(() => {});
  }
}

// 确认重命名
async function confirmRename() {
  try {
    await updateChatSession(renameForm.value);
    // 更新会话列表
    await loadSessionList();
    // 更新当前会话
    if (currentSession.value && currentSession.value.sessionId === renameForm.value.sessionId) {
      currentSession.value.title = renameForm.value.title;
    }
    renameDialogVisible.value = false;
    ElMessage.success('重命名成功');
  } catch (error) {
    console.error('重命名失败:', error);
    ElMessage.error('重命名失败');
  }
}

// 处理模型变更
async function handleModelChange(modelId) {
  if (currentSession.value) {
    try {
      await updateChatSession({
        sessionId: currentSession.value.sessionId,
        modelId: modelId
      });
      currentSession.value.modelId = modelId;
    } catch (error) {
      console.error('更新模型失败:', error);
      ElMessage.error('更新模型失败');
    }
  }
}

// 选择模型并创建会话
async function selectModelAndCreateSession(model) {
  selectedModelId.value = model.id;
  await createNewSession();
}

// 处理文件选择
function handleFileChange(file) {
  selectedFile.value = file.raw;
}

// 移除选中的文件
function removeSelectedFile() {
  selectedFile.value = null;
}

// 发送消息
async function handleSendMessage() {
  if (!currentSession.value) {
    ElMessage.warning('请先选择或创建一个会话');
    return;
  }
  
  const messageText = inputMessage.value.trim();
  if (!messageText && !selectedFile.value) {
    return;
  }
  
  try {
    let attachmentIds = [];
    
    // 如果有附件，先上传附件
    if (selectedFile.value) {
      try {
        const uploadRes = await uploadChatFile(
          selectedFile.value, 
          currentSession.value.sessionId, 
          currentUserId.value
        );
        attachmentIds.push(uploadRes);
        removeSelectedFile();
      } catch (error) {
        console.error('上传附件失败:', error);
        // 添加一条错误消息
        messageList.value.push({
          messageType: 'assistant',
          content: '附件上传失败，请稍后重试。',
          createTime: new Date(),
          isError: true
        });
        await nextTick();
        scrollToBottom();
        return;
      }
    }
    
    // 发送消息
    const messageData = {
      sessionId: currentSession.value.sessionId,
      content: messageText,
      userId: currentUserId.value,
      modelId: selectedModelId.value,
      attachmentIds: attachmentIds,
      messageType: 'user'
    };
    
    // 先在本地添加用户消息
    messageList.value.push({
      messageType: 'user',
      content: messageText,
      createTime: new Date()
    });
    
    // 清空输入
    inputMessage.value = '';
    
    // 滚动到底部
    await nextTick();
    scrollToBottom();
    
    // 显示加载状态
    isLoading.value = true;
    
    // 发送消息到服务器
    await sendChatMessage(messageData);
    
    // 重新加载消息列表
    await loadMessageList(currentSession.value.sessionId);
    
    // 隐藏加载状态
    isLoading.value = false;
  } catch (error) {
    console.error('发送消息失败:', error);
    isLoading.value = false;
    
    // 添加一条错误消息
    messageList.value.push({
      messageType: 'assistant',
      content: '网络繁忙，消息发送失败，请稍后重试。',
      createTime: new Date(),
      isError: true
    });
    
    await nextTick();
    scrollToBottom();
  }
}

// 滚动到底部
function scrollToBottom() {
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
  }
}

// 格式化消息内容（支持Markdown）
function formatMessage(content) {
  if (!content) return '';
  return marked.parse(content);
}

// 格式化文件大小
function formatFileSize(size) {
  if (!size) return '0 B';
  
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let i = 0;
  while (size >= 1024 && i < units.length - 1) {
    size /= 1024;
    i++;
  }
  
  return size.toFixed(2) + ' ' + units[i];
}

// 监听消息列表变化，自动滚动到底部
watch(messageList, () => {
  nextTick(() => {
    scrollToBottom();
  });
});
</script>

<style scoped>
.chat-container {
  display: flex;
  height: calc(100vh - 40px);
  max-height: 800px;
  width: 100%;
  background-color: #f5f7fa;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 左侧边栏 */
.sidebar {
  width: 280px;
  background-color: #ffffff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

.logo-container {
  padding: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
}

.logo-icon {
  font-size: 28px;
  color: var(--el-color-primary);
  margin-right: 10px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.new-chat-btn {
  padding: 16px;
}

.new-btn {
  width: 100%;
  border-radius: 6px;
}

.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.session-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  position: relative;
}

.session-item:hover {
  background-color: #f5f7fa;
}

.session-item.active {
  background-color: #ecf5ff;
}

.session-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #409EFF;
}

.session-info {
  flex: 1;
  overflow: hidden;
}

.session-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-last-message {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.session-item:hover .session-actions {
  opacity: 1;
}

/* 右侧聊天内容区 */
.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  background-color: #f5f7fa;
}

.chat-header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.current-session {
  font-size: 16px;
  font-weight: 500;
}

.model-selector {
  position: relative;
}

.model-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.model-popover-content {
  padding: 16px;
}

.model-search {
  margin-bottom: 16px;
}

.model-list {
  max-height: 400px;
  overflow-y: auto;
}

.model-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 8px;
  border: 1px solid #e6e6e6;
}

.model-item:hover {
  background-color: #f5f7fa;
}

.model-item.active {
  background-color: #ecf5ff;
  border-color: #409EFF;
}

.model-item-icon {
  margin-right: 12px;
  font-size: 24px;
  color: #409EFF;
}

.model-item-icon img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.model-item-info {
  flex: 1;
}

.model-item-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.model-item-desc {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.model-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-height: calc(100% - 130px); /* 减去头部和输入区域的高度 */
}

.welcome-container {
  height: 100%;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.welcome-content {
  text-align: center;
  max-width: 800px;
}

.welcome-title {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #303133;
}

.welcome-desc {
  font-size: 16px;
  color: #606266;
  margin-bottom: 32px;
}

.model-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.model-card {
  width: 220px;
  height: 160px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.model-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

.model-card-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.model-card-desc {
  font-size: 12px;
  color: #909399;
  text-align: center;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.message-item {
  display: flex;
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  margin: 0 12px;
}

.message-content {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  max-width: 70%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.user-message .message-content {
  background-color: #ecf5ff;
}

.error-message .message-content {
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
}

.message-sender {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #303133;
}

.message-text {
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.message-text :deep(p) {
  margin: 0 0 8px 0;
}

.message-text :deep(pre) {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}

.message-text :deep(code) {
  background-color: #f5f7fa;
  border-radius: 3px;
  padding: 2px 4px;
  font-family: monospace;
}

.attachment-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 8px 12px;
}

.attachment-icon {
  margin-right: 8px;
  color: #409EFF;
}

.attachment-info {
  flex: 1;
}

.attachment-name {
  font-size: 14px;
  margin-bottom: 2px;
}

.attachment-size {
  font-size: 12px;
  color: #909399;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.loading-text {
  margin-top: 12px;
  color: #909399;
}

.chat-input-area {
  padding: 12px 16px;
  background-color: #ffffff;
  border-top: 1px solid #e6e6e6;
}

.input-container {
  display: flex;
  align-items: flex-end;
}

.textarea-container {
  flex: 1;
  margin-right: 12px;
}

.input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-btn {
  background-color: transparent;
  border: none;
  color: #606266;
}

.action-btn:hover {
  color: #409EFF;
}

.send-btn {
  border-radius: 4px;
}

.selected-file {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 8px 12px;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-name {
  margin: 0 8px;
  font-size: 14px;
}

.file-size {
  font-size: 12px;
  color: #909399;
}

.remove-file {
  padding: 2px;
  background-color: transparent;
  border: none;
}
</style> 